<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <script src="./jquery.js"></script>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style: none;
      float: left;
      border: #000 1px solid;
      width: 33%;
      background: red;
    }
    .con {
      clear: both;
      width: 100%;
      background: rgb(208, 129, 10);
      height: 200px;
    }
  </style>
  <body>
    <!-- <img
      src="../../img/image-20220328170338414.png"
      width="500"
      height="500"
      alt=""
    />
    <img
      src="../../img/20220328170835.png"
      width="500"
      height="500"
      style="display: none"
      alt=""
    /> 
    <button id="btn">点击</button>-->

    <div style="border: 1px solid #000; width: 700px">
      <ul style="width: 100%">
        <li>标题1</li>
        <li>标题2</li>
        <li>标题3</li>
      </ul>
      <div class="con">内容1</div>
      <div class="con">内容2</div>
      <div class="con">内容3</div>
    </div>
    <input type="text" name="" id="username" />
    <input type="text" name="" id="age" />
    <button id="sub">提交</button>
    <table border="1" style="width: 200px">
      <thead>
        <tr>
          <th>年龄</th>
          <th>性别</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </body>
  <script>
    $(function () {
      $('div:gt(1)').toggle()
      $('li:first').css('background', 'white')
      $('li').click(function () {
        $('li').css({ background: 'red' })
        $(this).css({ background: 'white' })
        $('.con').hide()
        $('.con').eq($(this).index()).show()
      })

      $('#sub').click(function () {
        var username = $('#username').val(),
          age = $('#age').val()
        var str = `<tr>
                        <td>${username}</td>
                        <td>${age}</td>
                    </tr>`
        $('tbody').append(str)
      })
    })
  </script>
</html>
